<template>
  <!-- 回复评论
       1：导入接口
       2：点击发布：调用接口
       3：调用成功
           将评论数据添加到回复列表
           提示
           将父级的评论总数+1
 -->
  <van-action-sheet v-model="isShow" title="回复评论" @closed="closedEvent">
    <div class="re-comment">
      <div class="item">
        <img class="avatar" :src="currItem.aut_photo" alt="" />
        <div class="info">
          <div class="name">{{ currItem.aut_name }}</div>
          <div class="content">{{ currItem.content }}</div>
          <div class="other">
            <span class="time">{{ currItem.pubdate | relvTime }}</span>
          </div>
        </div>
      </div>
      <van-divider>回复列表</van-divider>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getData"
      >
        <div class="item" v-for="item in list" :key="item.com_id">
          <img class="avatar" :src="item.aut_photo" alt="" />
          <div class="info">
            <div class="name">{{ item.aut_name }}</div>
            <div class="content">{{ item.content }}</div>
            <div class="other">
              <span class="time">{{ item.pubdate | relvTime }}</span>
            </div>
          </div>
        </div>
      </van-list>
      <van-field
        class="send"
        placeholder="请输入评论内容"
        v-model.trim="content"
      >
        <template #button>
          <van-button size="small" color="#1989fa" @click="send"
            >发布</van-button
          >
        </template>
      </van-field>
    </div>
  </van-action-sheet>
</template>
<script>
import { comments, commentsPost } from '@/api/article'
export default {
  props: {
    currItem: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      isShow: false,
      offset: null,
      loading: false,
      finished: false,
      list: [],
      content: ''
    }
  },
  methods: {
    async getData () {
      const res = await comments({
        type: 'c',
        source: this.currItem.com_id,
        offset: this.offset,
        limit: 1
      })
      //   数据累加
      this.list.push(...res.data.results)
      // 修改v-model的值为false
      this.loading = false
      //   修改下一页请求条件
      this.offset = res.data.last_id
      //   判断是否加载 完成
      if (res.data.end_id === res.data.last_id) {
        this.finished = true
      }
      // console.log(res, '回复评论')
    },
    // 关闭且动作执行完成后
    closedEvent () {
      //   console.log('closedEvent')
      // 重置当前组件
      this.$emit('reLoad')
    },
    async send () {
      if (this.content === '') {
        this.$toast.fail('请先输入内容')
      } else {
        const res = await commentsPost({
          target: this.currItem.com_id,
          content: this.content,
          art_id: this.$route.query.id
        })
        //   添加到回复列表
        this.list.unshift(res.data.new_obj)
        //   提示
        this.$toast.success('回复评论成功')
        //   更新总条数
        // this.currItem.reply_count++
        // 11
        this.$emit('setCount')
        // 清空
        this.content = ''
        console.log(res)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.re-comment {
  padding: 15px 15px 60px 15px;
  .send {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
  }
}
.item {
  display: flex;
  padding: 10px 0;
  .avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 12px;
  }
  .info {
    flex: 1;
    .name {
      color: #94a1ba;
    }
    .content {
      padding: 8px 0;
      line-break: anywhere;
    }
    .other {
      .time {
        color: #8090b5;
        padding-right: 8px;
      }
    }
  }
}
</style>
